<template>
  <div>
    <NavBar>
      <template #title>订单结算台</template>
    </NavBar>
    <div class="address">
      <div class="icon">
        <van-icon name="location-o" />
      </div>

      <div class="address-detail">
        <p>{{ getDefaultAddress.name }} {{ getDefaultAddress.phone }}</p>
        <i>{{ getDefaultAddress.region.city }}{{ getDefaultAddress.region.region }}{{ getDefaultAddress.detail }} </i>
      </div>
      <div class="icon">
        <van-icon name="arrow" @click="$router.push(`/addresslist?addressId=${getDefaultAddress.address_id}`)"/>
      </div>
    </div>
    <div class="line">

    </div>
    <div class="pay">
      <div class="pay-item" v-for="item in detail" :key="item.goods_id">
        <img :src="item.goods_image" alt="">
        <div class="item-detail">
          <div class="item-title">
            {{ item.goods_name }}
          </div>
          <div class="item-price">
            <span>x {{ item.total_num }}</span>
            <i>￥ {{ item.goods_price_min }}</i>
          </div>
        </div>
      </div>
    </div>
    <div class="total">
      <div class="pay-total">
        <div>订单总金额：</div>
        <i>￥ {{ OrderTotalPrice }}</i>
      </div>
      <div class="pay-total">
        <p>优惠券：</p>
        <p>无优惠券可用</p>
      </div>
    </div>
    <div class="pay-footer">
      <div class="pay-infact">
        实付款：<i>￥{{ orderPayPrice }}</i>
      </div>
      <button @click="submitOrder">提交订单</button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapActions, mapState, mapGetters } from 'vuex'
import { order, submit } from '@/api/order'
export default {
  name: 'PayIndex',
  created () {
    this.defaultAddressIdAction()
    this.getDefaultAddressAction()
    this.getOrder()
  },
  data () {
    return {
      detail: {},
      OrderTotalPrice: 0,
      orderPayPrice: 0

    }
  },
  methods: {
    ...mapActions('address', ['defaultAddressIdAction', 'getDefaultAddressAction']),
    onEdit () {
      Toast('编辑')
    },
    async submitOrder () {
      const mode = this.$route.query.mode
      if (mode === 'cart') {
        const cartIds = this.selCheckedGoods.map(item => item.id).join(',')
        const result = await submit(mode, { cartIds })
        console.log(result)
        Toast.success('支付成功')
        this.$router.push('/myorder')
      } else {
        const goodsId = this.$route.query.goodsId
        const goodsNum = this.$route.query.goodsNum
        const goodsSkuId = this.$route.query.goodsSkuId
        const result = await submit(mode, { goodsId, goodsNum, goodsSkuId })
        console.log(result)
        Toast.success('支付成功')
        this.$router.push('/myorder')
      }
    },
    async getOrder () {
      const mode = this.$route.query.mode
      if (mode === 'cart') {
        const cartIds = this.selCheckedGoods.map(item => item.id).join(',')
        // const result = await order(mode, { cartIds: this.cartIds })
        const result = await order(mode, { cartIds })
        console.log(result)
        this.detail = result.data.order.goodsList
        this.OrderTotalPrice = result.data.order.orderTotalPrice
        this.orderPayPrice = result.data.order.orderPayPrice
      } else {
        const goodsId = this.$route.query.goodsId
        const goodsNum = this.$route.query.goodsNum
        const goodsSkuId = this.$route.query.goodsSkuId
        const result = await order(mode, { goodsId, goodsNum, goodsSkuId })
        // const result = await order(mode, { goodsId, goodsNum, goodsSkuId })
        console.log(result)
        this.detail = result.data.order.goodsList
        this.orderTotalPrice = result.data.order.orderTotalPrice
        this.orderPayPrice = result.data.order.orderPayPrice
      }
    }

  },
  computed: {
    ...mapState('address', ['getDefaultAddress']),
    ...mapGetters('cart', ['selCheckedGoods'])
  }
}
</script>

<style scoped>
i{
  font-style: normal;
  color: red;
}
.address{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px 10px;
}
.address .icon{
  padding-top: 10px;
  color: rgb(167, 167, 160);
}
.address .address-detail {
  width: 270px;
}
.address .address-detail p{
  font-size: 18px;
}
.address .address-detail i{
font-size: 16px;
color: rgb(167, 167, 160);
}
.line{
  width: 100%;
  height: 5px;
  background: url('@/assets/border-line.png') repeat;
  background-size: 100px 5px;
}
.pay{
  padding: 10px 0;
  overflow: hidden;
  background-color: rgb(247, 247, 247);
}
.pay-item{
  margin-bottom: 10px;
  width: 100%;
  height: 150px;
  background-color: white;
}
.pay-item{
  display: flex;
  align-content: flex-start;
  padding: 10px 15px;
}
.pay-item img{
  display: inline-block;
  width: 100px;
  height: 120px;
  border: 1px solid rgb(147, 144, 144);
  margin-right: 10px;
}
.pay-item .item-title{
    font-size: 16px;
    margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-item .item-price,.pay-footer{
  display: flex;
  justify-content: space-between;
}
.pay-item .item-price span{
  font-size: 15px;
  color: rgb(147, 144, 144);
}
.pay-item .item-price i{
  font-size: 16px;
}
.total{
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
}
.total .pay-total{
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
}
.pay-footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: white;
  border-top:1px solid  rgba(193, 187, 187,.5);
  font-size: 18px;
}
.pay-footer .pay-infact{
  text-align: center;
  width: 50%;
  height: 50px;
  line-height: 50px;

}
.pay-footer button{
  width: 35%;
  border: none;
  background-color: orangered;
  color: white;
}
</style>
